<template>
  <Modal
    v-model:active="solverResultModelVueActive"
    transfer
    title="运行结果"
    :width="480"
    confirm-text="确定"
  >
    <ConfigProvider :props="providedProps">
      <div class="header-detail">
        <div>对象</div>
        <img src="../../assets/line.svg" alt="" />
        <div>值</div>
      </div>
      <Scroll height="700" use-y-bar>
        <div>
          <div class="prop-row">
            <div>名称</div>
            <div>{{ solverResultName }}</div>
          </div>
          <div class="prop-row">
            <div>ID</div>
            <div>{{ solverResultId }}</div>
          </div>
          <div class="prop-row">
            <div>输入文件</div>
            <div class="text_overflow_single">
              OSS://test/solver/datasets/test
            </div>
          </div>
          <div class="prop-row">
            <div>输出地址</div>
            <div class="text_overflow_single">
              OSS://test/output/solver/datasets/test
            </div>
          </div>
          <div class="prop-row">
            <div>求解器</div>
            <div>DLUTFem</div>
          </div>
          <div class="prop-row">
            <div>CPU</div>
            <div>0</div>
          </div>
          <div class="prop-row">
            <div>内存 (Gi)</div>
            <div>0</div>
          </div>
          <div class="prop-row">
            <div>运行状态</div>
            <div>正在运行</div>
          </div>
        </div>
      </Scroll>
    </ConfigProvider>
  </Modal>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import { Modal, Scroll, ConfigProvider } from "cax-ui";
import { storeToRefs } from "pinia";
import { useCoreStore } from "@/UI/store";
const coreStore = useCoreStore();

let { solverResultModelVueActive, solverResultName, solverResultId } =
  storeToRefs(useCoreStore());
const providedProps = {
  default: { clearable: true },
  formItem: { required: false },
};
</script>

<style scoped lang="less">
.title {
  display: flex;
  align-items: center;
  margin-bottom: 16px;

  .title_color {
    width: 4px;
    height: 12px;
    background: #339af0;
    margin-right: 8px;
  }
  .title_content {
    opacity: 1;
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0em;
    font-variation-settings: "opsz" auto;
    /* content/主要一级primary */
    /* 样式描述：--vxp-content-color-primary */
    color: #212529;
  }
}
.header-detail {
  display: flex;
  flex-direction: row;
  height: 34px;
  background: #f8f9fa;
  align-items: center;
  justify-content: space-between;
  padding: 6px;
  box-sizing: border-box;
  font-family: PingFang SC;
  font-size: 14px;
  font-weight: normal;
  line-height: 22px;
  letter-spacing: 0em;

  /* content/基础base */
  /* 样式描述：--vxp-content-color-base */
  color: #495057;
  div {
    width: 50%;
    padding: 10px;
    box-sizing: border-box;
  }
}
.prop-row {
  background-color: white;
  padding: 2px 5px;
  box-sizing: border-box;
  font-family: PingFang SC;
  font-size: 14px;
  font-weight: normal;
  line-height: 22px;
  letter-spacing: 0em;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;

  /* content/主要一级primary */
  /* 样式描述：--vxp-content-color-primary */
  color: #212529;
  > div {
    width: 50%;
    padding: 10px;
    box-sizing: border-box;
    input {
      width: 100%;
      text-align: left;
    }
  }
}
</style>
